<template>
  <div>
    <video ref="videoElement" controls></video>
    <button @click="startPlayback">点击播放视频</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import flvjs from "flv.js";

const videoElement = ref(null);

onMounted(() => {
  startPlayback()
});
const startPlayback = () => {
  const videoElem = videoElement.value;

  if (flvjs.isSupported()) {
    if (videoElem) {
      const player = flvjs.createPlayer({
        type: "flv",
        url: "/output.flv", // 确保这是一个有效的 FLV 文件
      });

      player.attachMediaElement(videoElem);
      player.load();

      player.on(flvjs.Events.METADATA_ARRIVED, () => {
        videoElem.play().catch((error) => {
          console.error("播放失败:", error);
        });
      });

      player.on(flvjs.Events.ERROR, (error) => {
        console.error("FLV.js 播放器错误:", error);
      });

      player.on(flvjs.Events.LOADING_COMPLETE, () => {
        console.log("FLV.js 加载完成");
      });
    } else {
      console.error("videoElement is null");
    }
  } else {
    console.error("FLV.js 不支持此浏览器");
  }
};
</script>

<style scoped>
video {
  width: 100%;
  height: auto;
}
</style>
